<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta charset="UTF-8">
		<title>直播</title>
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		<link rel="stylesheet" type="text/css" href="http://www.joyue-tech.com/szptApp/html/css/common/common.css" />
		<link rel="stylesheet" type="text/css" href="http://www.joyue-tech.com/szptApp/html/css/livebroadcast.css" />
		<style type="text/css">
			body{
				height: 100%;
			}
			.content {
				/*height: 160px;*/
				/*width: 100%;*/
				/*display: flex;*/
				list-style: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			
			.content li {
				margin-right: 2px;
				height: 140px;
				float: left;
				width: 49%;
			}
			
			.broad .b_cont {
				height: 120px;
				width: 100%;
				/*background: yellow;*/
			}
			
			.b_cont img {
				height: 120px;
				width: 100%;
			}
			
			.broad p {
				margin: 0;
				padding: 0;
				font-size: 14px;
				color: #000;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="livebroadcast">
			<h3>直播互动</h3>
			<div class="broadcast">
				<div class="lb">
					<img style="height: 200px;width: 100%;" src="http://www.joyue-tech.com/szptApp/html/img/broadcast/borad.jpg"/>
					<!--<mt-swipe :auto="2000" :show-indicators="false">
						<mt-swipe-item class="swip-item-1 item"><img src="http://www.joyue-tech.com/szptApp/html/img/broadcast/1.jpg" /></mt-swipe-item>
						<mt-swipe-item class="swip-item-2 item"><img src="http://www.joyue-tech.com/szptApp/html/img/broadcast/2.jpg" /></mt-swipe-item>
						<mt-swipe-item class="swip-item-3 item"><img src="http://www.joyue-tech.com/szptApp/html/img/broadcast/3.jpg" /></mt-swipe-item>
					</mt-swipe>-->
				</div>
				<div class="fenge"></div>
				<div class="one_title">
					<a href="javascript;"><span class="icon"></span>
						<p>追热剧看综艺免流量！暑期福利限时开抢</p><span class="icon_r"></span></a>
				</div>
				<ul class="content">
					<li class="broad" v-for="data in item" @click="Goto(data.activityId,data.activityName)">
						<!--<a v-link="{name:'broadcast',params:{activityId:{{data.activityId}}}}">-->
						<div class="b_cont">
							<img v-bind:src="data.coverImgUrl" />
						</div>
						<p>{{data.activityName}}</p>
						<!--</a>-->
					</li>
				</ul>
			</div>
		</div>
		<script src="http://www.joyue-tech.com/szptApp/html/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
		<script src="http://www.joyue-tech.com/szptApp/html/js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://www.joyue-tech.com/szptApp/html/js/common/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#livebroadcast',
				data: {
					item: []
				},
				created: function() {
					var _self = this;
					this.$toast('发送HTTP');
					var url = server_url + "a/zhtj/zbxx/getAppId"
					console.log(url)
					this.$http.post(url, {
						offSet: "",
						fetchSize: ""
					}).then(function(res) {
						console.log(res.body.data.rows)
						if(res.status == 200) {
							_self.item = res.body.data.rows;
						}
					})
					this.$toast('发送完成');
				},
				methods: {
					prev: function() {
						this.$refs.swipeWrapper.prev();
						console.log(this.$children);
					},
					next: function() {
						this.$refs.swipeWrapper.next();
					},
					Goto: function(id,name) {
						localStorage.setItem("activityId", id);
						localStorage.setItem("activityName", name);
						location.href = "http://www.joyue-tech.com/szptApp/html/broaadcast.html";
					}
				}
			});
		</script>
	</body>

</html>